<template>
  <div class="login" style="background-image: url('/img/loginBK.png')">
    <Vcode :show="isShow" @success="success" @close="close" />
    <div class="loginBody">
      <p style="font-size: 23px;margin-bottom: 33px">功能测试平台</p>

      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="loginForm"
          label-width="auto"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="账号：" prop="userAccount">
          <el-input v-model="loginForm.userAccount" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码：" prop="userPassword">
          <el-input v-model="loginForm.userPassword" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
            <div style="height: 10px"></div>
            <el-button
                :disabled="loginForm.userAccount === '' || loginForm.userPassword === '' "
                :loading="buttonLoading"
                size="large" style="width: 100%;"
                type="primary" @click="signIn"
            >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Vcode from "vue3-puzzle-vcode"

export default {
  components: {
    Vcode,
  },
  data(){
    return{
      loginForm: {
        userAccount: 'admin',
        userPassword: 'admin',
      },
      user: {},
      buttonLoading: false,
      isShow: false,
    }
  },
  methods: {
    success(){
      this.isShow = false
      this.buttonLoading = true
      if(this.loginForm.userAccount == 'admin' && this.loginForm.userPassword == 'admin'){
        this.$message.success('登录成功')
        this.$router.push('/account')

        setTimeout(()=>{
          this.$notify({
            title: '登录成功',
            message: '欢迎回来',
            type: 'success'
          });
        },1200)
      }else{
        this.buttonLoading = false
        this.$message.error('用户名或密码错误')
      }
    },

    signIn(){
      this.isShow = true
    },

    // 用户点击遮罩层，应该关闭模态框
    close(){
      this.isShow = false;
    }
  }
}
</script>

<style scoped>
.login{
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.loginBody{
  height: auto;
  position: absolute;
  left: 83%;
  top: 50%;
  transform: translate(-83%, -50%);
  width: 22%;
  text-align: center;
  background: white;
  padding: 25px 30px 10px 30px;
  border-radius: 12px;
  box-shadow: 0px 5px 15px #999;
}

#canvas {
  float: right;
  margin-right: 1%;
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 80px;
}

</style>
